% !Mode:: "TeX:UTF-8"

\chapter{前端~vue~项目}

\section{项目需求}
本项目参照 “饿了么官网网页版”制作。饿了么网页版。本项目专注于完成点餐业务线功能， ”饿了么官网“中的其它功能暂不涉及。

主要解决“使用 Vue（前端）+Servlet（服务端）开发基于前后端分离架构应用程序”的问题，此章为前端vue框架部分的说明。

项目中所涉及到相关知识点：
   \begin{itemize}
   \item A JAX的使用
   \item Servlet的使用
   \item Session的使用
   \item 简单MVC封装
   \item Service层事务管理
   \item dao层批量操作
   \item 多对一与一对多的映射
   \item 服务器端json数据转换
   \item VueCli的使用
   \item 多条件模糊查询的使用
   \item Svn、Git版本控制工具的使用
   \end{itemize}
\section{项目设计}
业务流程图
\begin{figure}[htbp]
    \centering
    \includegraphics[width=0.9\textwidth]{3.1.png}
    \caption{业务流程图}\label{fig:3.1}
    \vspace{\baselineskip}
\end{figure}

由于项目三的前端基本是对项目二的一次重写，所以我们在此只列出设计不同或者改动过大的部分，其余部分不再赘述。
\begin{figure}[htbp]
    \centering
    \includegraphics[width=0.9\textwidth]{3.2.png}
    \caption{商家详细信息页面功能}\label{fig:3.2}
    \vspace{\baselineskip}
\end{figure}

\begin{figure}[htbp]
    \centering
    \includegraphics[width=0.9\textwidth]{3.3.png}
    \caption{送货地址列表页面功能}\label{fig:3.3}
    \vspace{\baselineskip}
\end{figure}

\begin{figure}[htbp]
    \centering
    \includegraphics[width=0.9\textwidth]{3.4.jpg}
    \caption{新增送货地址页面功能}\label{fig:3.4}
    \vspace{\baselineskip}
\end{figure}

\begin{figure}[htbp]
    \centering
    \includegraphics[width=0.9\textwidth]{3.5.png}
    \caption{编辑送货地址页面功能}\label{fig:3.5}
    \vspace{\baselineskip}
\end{figure}

\begin{figure}[htbp]
    \centering
    \includegraphics[width=0.9\textwidth]{3.6.png}
    \caption{注册页面功能}\label{fig:3.6}
    \vspace{\baselineskip}
\end{figure}

\begin{figure}[htbp]
    \centering
    \includegraphics[width=0.9\textwidth]{3.7.png}
    \caption{历史订单页面功能}\label{fig:3.7}
    \vspace{\baselineskip}
\end{figure}



\section{项目测试}
测试与云端数据库链接。
因为负责后端的刘京宗同学进度比较快，我们在进行项目三前端时，
他将后端放在租到的数据库上，这样我们项目三前端可以直接使用云端数据库的数据。
图\ref{fig:1961}、\ref{fig:1962}、\ref{fig:1963}、\ref{fig:1964}
为与数据库链接。

\begin{figure}[htbp]
    \centering
    \includegraphics[width=0.9\textwidth]{1961.png}
    \caption{}\label{fig:1961}
    \vspace{\baselineskip}
\end{figure}
\begin{figure}[htbp]
    \centering
    \includegraphics[width=0.9\textwidth]{1962.png}
    \caption{}\label{fig:1962}
    \vspace{\baselineskip}
\end{figure}
\begin{figure}[H]
    \centering
    \includegraphics[width=0.9\textwidth]{1963.png}
    \caption{}\label{fig:1963}
    \vspace{\baselineskip}
\end{figure}
\begin{figure}[H]
    \centering
    \includegraphics[width=0.9\textwidth]{1964.png}
    \caption{}\label{fig:1964}
    \vspace{\baselineskip}
\end{figure}



\section{开发过程记录}
\subsection{第一阶段}
(1)检查开发环境。

安装~npm~、cnpm~、vue-cli~。

图为成功安装~cnpm~、vue~。
\begin{figure}[htbp]
    \centering
    \includegraphics[width=0.7\textwidth]{1965.png}
    \caption{检查~cnpm~和~vue~截图}\label{fig:1965}
    \vspace{\baselineskip}
\end{figure}

(2)搭建~VueCli~工程总体架构。

根据教学视频，搭建~VueCli~模板工程。
添加~font-awesome~与~axios~依赖，
添加图片到~src~的~assets~中，
在~src~目录下添加~common.js~文件，
在工程根目录下添加~vue.config.js~文件。
\begin{figure}[htbp]
    \centering
    \includegraphics[width=0.7\textwidth]{1966.png}
    \caption{common.js~文件}\label{fig:1966}
    \vspace{\baselineskip}
\end{figure}
\begin{figure}[htbp]
    \centering
    \includegraphics[width=0.7\textwidth]{1967.png}
    \caption{vue.config.js~文件}\label{fig:1967}
    \vspace{\baselineskip}
\end{figure}

(3)添加~main.js~文件。
添加~App.vue~文件，设置通用格式。
创建路由~Index.js~文件。
\begin{figure}[htbp]
    \centering
    \includegraphics[width=0.7\textwidth]{1968.png}
    \caption{common.js~文件}\label{fig:1968}
    \vspace{\baselineskip}
\end{figure}
\begin{figure}[htbp]
    \centering
    \includegraphics[width=0.7\textwidth]{1969.png}
    \caption{vue.config.js~文件}\label{fig:1969}
    \vspace{\baselineskip}
\end{figure}

(4)书写前端各组件代码.

与项目二静态前端页面相比，主要不同在于：
将静态工程中的~css~内容添加到~style~中；
修改图片路径，从数据库中读取。

\newpage
\subsection{创新点}
\begin{itemize}
    \item 处理了订单页面送货人显示问题。
    \item 可以从订单页面跳转到支付页面
    \item 在登录和注册时增加了对手机号码的检查。
    \item 解决了订单页面有小数时，显示异常的问题。
\end{itemize}

~\\
\section{项目特色}
本项目使用~vue~开发与后端分类离的前端。
前端使用的数据不在是静态的，而是动态地从后端获取。
设置合理的接口，使前端可以与后端连接，获取数据。
但在开发过程前端不需要与后端连接，并且可以通过接口与不同的后端连接。
\begin{figure}[htbp]
    \centering
    \includegraphics[width=0.7\textwidth]{19610.png}
    \caption{项目三和项目四的挂载}\label{fig:19610}
    \vspace{\baselineskip}
\end{figure}

~\\
\section{项目所遇到的问题和解决方法}
(1)在安装~vue-cli~时，我安装了~vue3~。
跟随教学视频进行时，发现软件自动生成的内容与老师的不同，
并且老师的代码在我运行时会报错。
在搜索错误原因的过程中，我推测有可能是~vue~版本问题。
我尝试重新建了一个文件，安装~vue2~。
代码不再报错，和教学视频中结果相同。


(2)关于添加新的收货地址的问题。
根据教学视频写的代码，在新增收获地址时会出现显示的用户信息与新增的不同的情况。
原因是前端在取数据时，取得的是登录用户的信息。
修改获取信息的方法，使前端取到送送货地址的用户信息。

\newpage

\section{结果及实验反思}
\subsection{实验结果}
\begin{figure}[h]
    \begin{minipage}[t]{0.3\linewidth}
       \centering
       \includegraphics[width=0.7\textwidth]{4.1.png}
       \caption{在线支付}\label{fig:4.1}
    \end{minipage}
    \begin{minipage}[t]{0.3\linewidth}
       \centering
       \includegraphics[width=0.7\textwidth]{4.2.png}
       \caption{地址管理}\label{fig:4.2}
    \end{minipage}
    \begin{minipage}[t]{0.3\linewidth}
       \centering
       \includegraphics[width=0.7\textwidth]{4.3.png}
       \caption{确认订单页面}\label{fig:4.3}
    \end{minipage}
  \end{figure}
 
  \begin{figure}[h]
    \begin{minipage}[t]{0.3\linewidth}
       \centering
       \includegraphics[width=0.7\textwidth]{4.6.png}
       \caption{切换地址时用户改变}\label{fig:4.6}
    \end{minipage}
    \begin{minipage}[t]{0.3\linewidth}
       \centering
       \includegraphics[width=0.7\textwidth]{4.4.png}
       \caption{注册时重复号码}\label{fig:4.4}
    \end{minipage}
    \begin{minipage}[t]{0.3\linewidth}
       \centering
       \includegraphics[width=0.7\textwidth]{4.5.png}
       \caption{注册时手机号位数不对}\label{fig:4.5}
    \end{minipage}
  \end{figure}
 
  \begin{figure}[H]
    \begin{minipage}[t]{0.4\linewidth}
       \centering
       \includegraphics[width=0.7\textwidth]{4.7.png}
       \caption{地址删除}\label{fig:4.7}
    \end{minipage}
    \begin{minipage}[t]{0.4\linewidth}
        \centering
        \includegraphics[width=0.7\textwidth]{4.8.jpg}
        \caption{未修改状态}\label{fig:4.7}
     \end{minipage}
     \begin{minipage}[t]{0.4\linewidth}
        \centering
        \includegraphics[width=0.7\textwidth]{4.9.jpg}
        \caption{已修改状态}\label{fig:4.7}
     \end{minipage}



  \end{figure}

\subsection{实验反思}
在我们将前端与项目四后端连在一起的时候，出现的很大一部分错都是因为前端写代码时粗心大意，很多拼写错误导致接口不能正确的连接。
在 bug 时，也麻烦后端同学很多，很不好意思。经过此次项目，我们深刻意识到拼写错误这类错误需要完全规避。 

通过此次实践，我们学到了很多开发前端项目的知识，让我们感觉收获颇多，我们也学习如何用 LaTeX 撰写文档，并且意识到， 
文档对与项目开发是很有必要的。它可以用来记录开发的设计、过程、遇到的问题等等。因为我们组是在项目快要结束的时候才开始撰写文档，
 其实有些东西的记忆已经有些模糊了。比如，项目进行时的一些想法，遇到的一些问题以及解决的方法。写的时候感觉有很多都没有写到。
 这其实是一种损失，因为从问题和 bug 里也能学到很多东西，有些冒出的想法也许之后就可以实现。结果最后因为没有及时记录，这些内容就忘记了。
 所以，我们会吸取这次的教训，在以后的开发中，及时撰写文档，既作为记录也作为学习。

